<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>晒图详情页</title>
		<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
		<link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	</head>
	<style>
		body{
			    font-family: 'Helvetica Neue',Helvetica,sans-serif;
			    font-size: 17px;
			    line-height: 21px;
			    color: #000;
			    margin: 0px;
			    padding: 0px;
			}
			
		div.showtitle{
			width:100%;
			height: 40px;
			background: chartreuse;
		}
		div.showtitle span{
			line-height: 40px;
			text-align: center;
		    font-size: 30px;
		}
		
		.col-sm-6{
			float: left;
			width: 200px;
		}
		
		.fa-plus-circle{
			position: absolute;
			top: 0px;
			right: 0px;
		}
		
		 .nav-footer {
				    width: 100%;
				    position: fixed;
				    bottom: 0;
				    left: 0;
				    display: flex;
				    align-items: center;
				    justify-content: space-around;
				    background: #fff;
				    border-top: solid 1px #e6e6e6;
				    padding: 1%;
				    height: 50px;
				}
				.nav-footer a {
				    display: flex;
				    flex-direction: column;
				    align-content: center;
				    align-items: center;
				    font-size: 10px;
				    color: #929292;
				}
				.nav-footer a span img {
				    height: 25px;
				    overflow: hidden;
				    font-size: 23px;
				    padding-top: 2px;
				}
				.mui-icon {
				    font-family: Muiicons;
				    font-size: 24px;
				    font-weight: 400;
				    font-style: normal;
				    line-height: 1;
				    display: inline-block;
				    text-decoration: none;
				    -webkit-font-smoothing: antialiased;
				}
				.nav-footer a {
				    display: flex;
				    flex-direction: column;
				    align-content: center;
				    align-items: center;
				    font-size: 11px;
				    color: #929292;
				}
				
				.mui-bar-nav {
				    top: 0;
				    -webkit-box-shadow: 0 1px 6px #ccc;
				    box-shadow: 0 1px 6px #ccc;
				}
				
				.mui-bar {
				    position: fixed;
				    z-index: 10;
				    right: 0;
				    left: 0;
				    height: 44px;
				    padding-right: 10px;
				    padding-left: 10px;
				    border-bottom: 0;
				    background-color:RGB(88,88,88);
				}
				
				.mui-bar-nav.mui-bar .mui-icon {
				    /*margin-right: -10px;*/
				    margin-left: -10px;
				    padding-right: 10px;
				    padding-left: 10px;
				}
				.mui-bar .mui-icon {
				    font-size: 24px;
				    position: relative;
				    z-index: 20;
				    padding-top: 10px;
				    padding-bottom: 10px;
				}
				.mui-icon {
				    font-family: Muiicons;
				    font-size: 24px;
				    font-weight: 400;
				    font-style: normal;
				    line-height: 1;
				    display: inline-block;
				    text-decoration: none;
				    -webkit-font-smoothing: antialiased;
				}
				.mui-pull-left {
				    float: left;
				}
				a {
				    text-decoration: none;
				    color: #FC605A;
				}
				a {
				    background: 0 0;
				}
				
				.mui-bar .mui-title {
				    right: 201px;
				    left: 40px;
				    top: 4px;
				    display: inline-block;
				    overflow: hidden;
				    width: auto;
				    margin: 0;
				    text-overflow: ellipsis;
				}
				.mui-title {
				    font-size: 17px;
				    font-weight: 500;
				    line-height: 44px;
				    position: absolute;
				    display: block;
				    width: 100%;
				    margin: 0 -10px;
				    padding: 0;
				    text-align: center;
				    white-space: nowrap;
				    color: #fff;
				}
				
				.showpic{
					margin: auto;
				}
				
				div.empty{
					height: 8px;
					/*border: 1px solid red;*/
				}
				
				.new-min-title-list {
				    display: flex;
				    align-items: center;
				    justify-content: space-around;
				    padding: 0;
				}
				
				ul, li {
				    font-style: normal;
				    list-style: none;
				}
				
				li {
				    display: list-item;
				    text-align: -webkit-match-parent;
				}
				.new-min-title-list li a {
				    color: #000;
				}
				.new-min-title-list li a {
				    display: flex;
				    flex-direction: column;
				    align-items: center;
				}
				.new-min-title-list li a {
				    color: #000;
				}
				
				.mui-table-view {
				    position: relative;
				    margin-top: 0;
				    margin-bottom: 0;
				    padding-left: 0;
				    list-style: none;
				    background-color: #fff;
				}
				
				.mui-table-view-cell {
				    position: relative;
				    overflow: hidden;
				    padding: 11px 15px;
				    -webkit-touch-callout: none;
				}
				
				.mui-table-view-cell>a:not(.mui-btn) {
				    position: relative;
				    display: block;
				    overflow: hidden;
				    margin: -11px -15px;
				    padding: inherit;
				    white-space: nowrap;
				    text-overflow: ellipsis;
				    color: inherit;
				    border-bottom: solid 1px #efefef;
				}
				
				p{
					position: absolute;
					top: -6px;
					left: 154px;
				}

	</style>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"><img src="img/left_fri.png"/></a>
			<h1 class="mui-title">晒图详情</h1>			
		</header>

<div class="pic">
		<img src="" alt="" width="100%" class="showpic"/>
</div>

<div class="empty">
	
</div>

<div class="info">
	<ul class="mui-table-view">
		            <li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							标题:<p class="title"></p>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="new-my-news.html" class="mui-navigate-right">
							用户ID:<p class="id"></p>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="new-address.html" class="mui-navigate-right">
							图片ID:<p class="picid"></p>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							点击量:<p class="hit"></p>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							发布时间:<p class="time"></p>
						</a>
					</li>
				</ul>
</div>

<script type="text/javascript">
	        var url=window.location.href;
            spstr=url.split("=");
            var id=spstr[spstr.length-1];
            console.log(id);
            
            $(function() {            	
            var url="http://172.24.10.175/workout/api.php/slists/mod/shaitu/id/"+id;
            $.ajax({
					type: "post",
					url: url,
					cache: false,
					dataType: "jsonp",
					success: function(data){	
						$(".showpic").attr("src","http://172.24.10.175/workout/Uploads/"+data[0].thumb0);					 													    	                    $(".title").text(data[0].title); 
						$(".id").text(data[0].userid); 
						$(".picid").text(data[0].id); 
						$(".hit").text(data[0].hits); 
						$(".time").text(data[0].update_time); 
					},error:function(){
						alert('dhuh');
					}
				});
			});
</script>

	</body>
</html>
